<template>
    <div class="regist">
        <!-- 顶部 -->
        <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- 表单部分 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="value" name="tel" label="请输入手机号"
                    :rules="[{ validator}]" />
            </van-cell-group>
            <div style="margin: 50px 30px;">
                <van-button :disabled="!validator(value)" round block type="danger" native-type="submit">
                    下一步
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入创建路由对象的方法
import { useRouter } from 'vue-router';
// 引入验证手机号是否被注册接口
import {checkphone} from '@/api/registapi'
// 引入函数形式的组件
import { Dialog } from 'vant';
let value = ref<string>('')    // 手机号
let validator= (val:string) => /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(val);
// 创建路由对象
const router=useRouter()
// 点击下一步按钮
const onSubmit = (values:{tel:string}) => {
    // 调用接口
    checkphone(values).then((res:any)=>{
        // console.log('验证手机号注册接口',res);
        // console.log(res.code);
        if(res.code==200){
            // 如果未注册
            Dialog.confirm({
                title: '提示',
                message:`将向手机号：${value.value}发送短信验证码`
            }).then(() => {
                // on confirm   点击确认按钮
                // 跳转到注册第二步页面
                router.push({path:'/register/step2',query:{tel:value.value}})
            })
        }else if(res.code==10005){
            // 如果已注册
            Dialog.confirm({
                title: '提示',
                message:`手机号已注册，是否去登录`
            }).then(() => {
                // on confirm  // 按确认按钮时
                // 跳转到登录页
                router.push('/login')
            })
        }
    })
}
</script>
<style scoped>
.van-cell-group{
    margin-top: 60px;
}
.regist{
    background-color: #fff;
    height: 100%;
}
</style>
